import React from 'react';
import { List, Tabs, WhiteSpace } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import styles from './HomeGrid.less';
import MyIcon from '../../components/Base/MyIcon';
import _ from 'lodash';

const Item = List.Item;
const Brief = Item.Brief;
const TabPane = Tabs.TabPane;


const numberToChinese = (number) => {
  switch (number) {
    case 1:
      return '一';
      break;
    case 2:
      return '二';
      break;
    case 3:
      return '三';
      break;
    case 4:
      return '四';
      break;
    case 5:
      return '五';
      break;
    case 6:
      return '六';
      break;
    case 7:
      return '七';
      break;
    case 8:
      return '八';
      break;
    case 9:
      return '九';
      break;
  }
};


class Class extends React.Component {
  state = {
    all: false,
  }
  aa = (e) => {
    e.stopPropagation();
    this.setState({
      all: true,
    });
  }

  render() {
    const { classArr, teacher } = this.props;
    const all = this.state.all;
    return (
      <div>
        <div className={styles.classT2}><span className={styles.classColor}>{teacher}</span><span
          style={{ marginLeft: '1rem' }}
        >共计<span className={styles.classColor}>{classArr.length}</span>课时</span></div>
        {
          classArr.map((item, index) => {
            if (all || index <= 2) {
              return (
                <div key={index} className={styles.classT3}><span
                  className={styles.classNum}
                >第{numberToChinese(index + 1)}课</span> {item}</div>
              );
            }
          })
        }
        {!all &&
        <div className={styles.center} onClick={this.aa}>查看全部</div>
        }
      </div>
    );
  }
}


const class1 = ['《育婴师认证课程》-前言', '《育婴师认证课程》-基本要求（1）', '《育婴师认证课程》-基本要求（2）', '《育婴师认证课程》-基本要求（3）', '《育婴师认证课程》-基本要求（4）', '《育婴师认证课程》-基本要求（5）', '《育婴师认证课程》-基本要求（6）'];

const class2 = ['《体系制胜》简介', '第一章：大定向', '第二章：建组织', '第三章：积分式管理', '第四章：全绩效', '第五章：动力源', '第六章：驱动股', '第七章：合伙人'];

const class3 = ['认识你的客户', '抓住有效新客', '搭建会员体系-①为什么要做会员制？', '搭建会员体系-②怎样搭建会员体系？', '搭建会员体系-③如何进行积分管理？', '只做精准营销', '细致会员服务', '《母婴实体店2017第1-3季度客户画像报告》'];

const class4 = ['精准任务回访操作', '我的业绩、我的回访、我的会员操作', '销售管理、新增会员、礼券核销操作', '账号管理操作', '会员分配操作', '优惠券配置发布操作', '回访查询、短信管理、位置管理操作', '电子会员卡、积分提醒操作'];


class HomeGrid extends React.Component {

  componentDidMount() {
    this.props.fetchExamLibList();
  }

  render() {
    const { dispatch, examLibList, shopId, homeSchoolTab } = this.props;

    return (
      <Tabs activeKey={homeSchoolTab} onChange={this.props.clickTab} swipeable style={{ paddingBottom: '1rem' }}>
        <TabPane tab="精品课程" key="1">
          <List>
            <Item
              thumb={<MyIcon type="s6" size="lg" />}
              onClick={() => {
                location.href = 'http://wx.hy-bang.com/pt/file/guidance/';
              }}
            >
              《汇员帮操作视频指引》
              <Brief>
                <Class classArr={class4} teacher="汇员帮" />
              </Brief>
            </Item>

            <Item
              thumb={<MyIcon type="s3" size="lg" />}
              onClick={() => {
                location.href = 'https://mp.weixin.qq.com/mp/homepage?__biz=MzU4NTA1NDk5Ng==&hid=13&sn=4ac0cf0558f4e422c15e966d2d592655#wechat_redirect';
              }}
            >
              《会员精准营销》
              <Brief>
                <Class classArr={class3} teacher="汇员帮" />
              </Brief>
            </Item>

            <Item
              thumb={<MyIcon type="s1" size="lg" />}
              onClick={() => {
                location.href = 'http://mp.weixin.qq.com/mp/homepage?__biz=MzU4NTA1NDk5Ng==&hid=18&sn=469e0d08dc0ec21e839bd4d0e4997534#wechat_redirect';
              }}
            >
              《体系制胜》
              <Brief>
                <Class classArr={class2} teacher="周如祥" />
              </Brief>
            </Item>

            <Item
              thumb={<MyIcon type="s2" size="lg" />}
              onClick={() => {
                location.href = 'https://mp.weixin.qq.com/mp/homepage?__biz=MzU4NTA1NDk5Ng==&hid=12&sn=0f66ab23f39705a41191818e2814b4f1&uin=&key=&devicetype=Windows+10&version=62060028&lang=zh_CN&ascene=1&winzoom=1';
              }}
            >
              《育婴师认证课程》
              <Brief>
                <Class classArr={class1} teacher="汇员帮" />
              </Brief>
            </Item>

          </List>
          <WhiteSpace />
        </TabPane>
        <TabPane tab="在线考试" key="2">
          <div className={styles.exam}>
            <div className={styles.img}>
              <img src={require('../../assets/exam6.png')} alt="" />
            </div>
            <div>
              <div className={styles.title}>门店考试</div>
              <div>
                <span onClick={() => this.props.goToExam(null, shopId)} className={styles.practice}>模拟考试</span>
                <span onClick={() => this.props.goToExamRecords()} className={styles.simulation}>考试记录</span>
              </div>
            </div>
          </div>
          {
            _.map(examLibList, (item) => {
              return (
                <div className={styles.exam} key={item._id}>
                  <div className={styles.img}>
                    <img src={require('../../assets/' + (item.icon ? item.icon : 'exam1.png'))} alt="" />
                  </div>
                  <div>
                    <div className={styles.title}>{item.name}</div>
                    <div>
                      <span onClick={() => this.props.goToTrain(item)} className={styles.practice}>题库练习</span>
                      <span onClick={() => this.props.goToExam(item)} className={styles.simulation}>模拟考试</span>
                    </div>
                  </div>
                </div>
              );
            })
          }
        </TabPane>
      </Tabs>
    );
  }

}

export default connect(
  (state, props) => {
    return {
      examLibList: state.exam.examLibList,
      shopId: state.auth.currentUser.shopId,
      homeSchoolTab: state.home.homeSchoolTab,
    };
  },
  (dispatch, props) => {
    return {
      fetchExamLibList() {
        dispatch({ type: 'exam/fetchExamLibList', payload: { filter: { ref_type: 'examLib' } } });
      },

      goToTrain(item) {
        dispatch(routerRedux.push(`/trainsMain?ref_type=${item.ref_type}&ref_id=${item._id}&examLibName=` + encodeURIComponent(item.name)));
      },
      goToExam(item, shopId) {
        if (shopId) {
          dispatch(routerRedux.push(`/examPaperList?shopId=${shopId}`));
        } else {
          dispatch(routerRedux.push(`/examPaperList?ref_type=${item.ref_type}&ref_id=${item._id}&examLibName=` + encodeURIComponent(item.name)));
        }
      },
      clickTab(key) {
        dispatch({ type: 'home/save2', payload: { homeSchoolTab: key } });
      },
      goToExamRecords() {
        dispatch(routerRedux.push(`/examRecords`));
      },
    };
  },
)(HomeGrid);

